<script setup>
import { ref, reactive, onMounted } from 'vue'
import axios from "@/utils/axios.js"
import {useRoute,useRouter} from "vue-router";
import {useUserStore} from "@/stores/user.js";

const users = useUserStore().user
const router = useRouter()
const route = useRoute()
// 用户数据
const userData = reactive({
  userId:'',
  phone: '',
  email: '',
  questions: ''
})

// 安全设置项
const securityItems = reactive({
  phone: {
    icon: 'phone',
    title: "手机号",
    value: "",
    status: "",
    statusType: ""
  },
  email: {
    icon: 'email',
    title: "邮箱",
    value: "",
    status: "",
    statusType: ""
  },
  question: {
    icon: 'question',
    title: "密保问题",
    value: "设置密保问题以增强账户安全",
    status: "未设置",
    statusType: "warning"
  },
  lock: {
    icon: 'lock',
    title: "修改密码",
    value: "定期更改密码更安全",
    hasArrow: true
  }
})

const us = JSON.parse(sessionStorage.getItem("user"));

// 初始化数据
const init = () => {
  axios.get(`api/users/getUsers/${us.userId}`)
      .then(res => {
        userData.userId = res.data.userId
        // 更新手机号
        if(res.data.phone) {
          userData.phone = res.data.phone
          securityItems.phone.value = res.data.phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
          securityItems.phone.status = "已绑定"
          securityItems.phone.statusType = "success"
        } else {
          securityItems.phone.value = "未绑定手机号"
          securityItems.phone.status = "未绑定"
          securityItems.phone.statusType = "warning"
        }

        // 更新邮箱
        if(res.data.email) {
          userData.email = res.data.email
          securityItems.email.value = res.data.email
          securityItems.email.status = "已绑定"
          securityItems.email.statusType = "success"
        } else {
          securityItems.email.value = "请绑定邮箱~"
          securityItems.email.status = "未绑定"
          securityItems.email.statusType = "warning"
        }
      })
  axios.get(`api/securityQuestions/getCount/${us.userId}`)
  .then(res => {
    if(res.data === 0){
      console.log("查看客户有没有密保问题"+res.data)
      securityItems.question.value = "设置密保问题以增强账户安全";
      securityItems.question.status = "未设置";
      securityItems.question.statusType = "warning";
    }else{
      securityItems.question.value = "已设置密保问题";
      securityItems.question.status = "已绑定";
      securityItems.question.statusType = "success";
    }
  })
}

onMounted(() => {
  init()
})

// 查看绑定的手机
const lookPhone = () => {

}

// 绑定邮箱
const changeEmail = () => {
//  跳转到邮箱绑定界面
  router.push({
    name: 'EmailSec',
  })
}

// 设置密保问题
const setQuestion = () => {
//   跳转到密保问题界面
  router.push({
    name: 'QuestionSec',
  })
}

// 修改密码
const changePassword = () => {
  router.push('/changePassword')
}

// 安全提示
const securityTips = [
  "请勿向他人泄露您的账户信息和验证码",
  "建议定期修改密码，并使用数字、字母和符号组合",
  "设置密保问题，以便在忘记密码时找回账户",
  "如发现异常登录，请立即修改密码并联系客服"
]
</script>

<template>
  <!-- 导航栏 -->
  <van-nav-bar
      title="账户安全"
      left-text="返回"
      left-arrow
      @click-left="$router.go(-1)"
      fixed
      safe-area-inset-top
  />·

  <div class="security-container">
    <!-- 顶部状态区域 -->
    <div class="security-status">
      <div class="status-icon">
        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M12 22C12 22 20 18 20 12V5L12 2L4 5V12C4 18 12 22 12 22Z" stroke="#07C160" stroke-width="2" stroke-linejoin="round"/>
          <path d="M9 12L11 14L15 10" stroke="#07C160" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </div>
      <h2 class="status-title">账户安全状态良好</h2>
      <p class="status-desc">已开启多项安全保护，建议定期检查安全设置</p>
    </div>

    <!-- 安全设置项目列表 -->
    <div class="security-items">
      <!-- 手机号 -->
      <div class="security-item" @click="lookPhone">
        <div class="item-left">
          <div class="item-icon phone">📱</div>
          <div class="item-info">
            <div class="item-title">{{ securityItems.phone.title }}</div>
            <div class="item-value">{{ securityItems.phone.value }}</div>
          </div>
        </div>
        <div class="item-right">
          <span class="item-status" :class="securityItems.phone.statusType">
            {{ securityItems.phone.status }}
          </span>
        </div>
      </div>

      <!-- 邮箱 -->
      <div class="security-item" @click="changeEmail">
        <div class="item-left">
          <div class="item-icon email">📧</div>
          <div class="item-info">
            <div class="item-title">{{ securityItems.email.title }}</div>
            <div class="item-value">{{ securityItems.email.value }}</div>
          </div>
        </div>
        <div class="item-right">
          <span class="item-status" :class="securityItems.email.statusType">
            {{ securityItems.email.status }}
          </span>
        </div>
      </div>

      <!-- 密保问题 -->
      <div class="security-item" @click="setQuestion">
        <div class="item-left">
          <div class="item-icon question">❓</div>
          <div class="item-info">
            <div class="item-title">{{ securityItems.question.title }}</div>
            <div class="item-value">{{ securityItems.question.value }}</div>
          </div>
        </div>
        <div class="item-right">
          <span class="item-status" :class="securityItems.question.statusType">
            {{ securityItems.question.status }}
          </span>
        </div>
      </div>

      <!-- 修改密码 -->
      <div class="security-item" @click="changePassword">
        <div class="item-left">
          <div class="item-icon lock">🔒</div>
          <div class="item-info">
            <div class="item-title">{{ securityItems.lock.title }}</div>
            <div class="item-value">{{ securityItems.lock.value }}</div>
          </div>
        </div>
        <div class="item-right">
          <span class="arrow">›</span>
        </div>
      </div>
    </div>

    <!-- 安全提示区域 -->
    <div class="security-tips">
      <h3 class="tips-title">安全提示</h3>
      <div class="tip-item">
        <span class="tip-number">1</span>
        <span class="tip-text">{{ securityTips[0] }}</span>
      </div>
      <div class="tip-item">
        <span class="tip-number">2</span>
        <span class="tip-text">{{ securityTips[1] }}</span>
      </div>
      <div class="tip-item">
        <span class="tip-number">3</span>
        <span class="tip-text">{{ securityTips[2] }}</span>
      </div>
      <div class="tip-item">
        <span class="tip-number">4</span>
        <span class="tip-text">{{ securityTips[3] }}</span>
      </div>
    </div>
  </div>
</template>

<style scoped>
/* 原有的样式保持不变... */
.security-container {
  padding-top: 46px;
  background: white;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
}

.security-status {
  text-align: center;
  padding: 40px 20px 30px;
  background: linear-gradient(to bottom, #f0f9f0, #ffffff);
  border-bottom: 1px solid #eaeaea;
  flex-shrink: 0;
}

.status-icon {
  margin-bottom: 16px;
}

.status-icon svg {
  width: 64px;
  height: 64px;
}

.status-title {
  font-size: 22px;
  color: #333;
  margin-bottom: 12px;
  font-weight: 600;
}

.status-desc {
  color: #666;
  font-size: 16px;
  line-height: 1.5;
}

.security-items {
  padding: 0 20px;
  flex: 1;
}

.security-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid #f0f0f0;
}

.security-item:last-child {
  border-bottom: none;
}

.item-left {
  display: flex;
  align-items: center;
  flex: 1;
}

.item-icon {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background-color: #f5f7fa;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  font-size: 24px;
}

.item-info {
  display: flex;
  flex-direction: column;
}

.item-title {
  font-size: 18px;
  color: #333;
  margin-bottom: 6px;
  font-weight: 500;
}

.item-value {
  font-size: 16px;
  color: #999;
}

.item-right {
  display: flex;
  align-items: center;
}

.item-status {
  font-size: 16px;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: 6px;
}

.item-status.success {
  color: #07C160;
  background-color: #f0f9f0;
}

.item-status.warning {
  color: #FF9F00;
  background-color: #fff7e6;
}

.arrow {
  font-size: 24px;
  color: #ccc;
  margin-left: 12px;
  font-weight: bold;
}

.security-tips {
  padding: 30px 20px;
  background-color: #f9f9f9;
  border-top: 1px solid #eaeaea;
  flex-shrink: 0;
}

.tips-title {
  font-size: 18px;
  color: #333;
  margin-bottom: 20px;
  font-weight: 600;
  text-align: center;
}

.tip-item {
  display: flex;
  margin-bottom: 16px;
  line-height: 1.6;
  align-items: flex-start;
}

.tip-item:last-child {
  margin-bottom: 0;
}

.tip-number {
  display: inline-block;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: #FF9F00;
  color: white;
  text-align: center;
  line-height: 28px;
  font-size: 14px;
  margin-right: 12px;
  flex-shrink: 0;
  margin-top: 2px;
}

.tip-text {
  font-size: 16px;
  color: #666;
  flex: 1;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .security-status {
    padding: 30px 20px 20px;
  }

  .status-icon svg {
    width: 56px;
    height: 56px;
  }

  .status-title {
    font-size: 20px;
  }

  .status-desc {
    font-size: 15px;
  }

  .security-items {
    padding: 0 16px;
  }

  .security-item {
    padding: 16px 0;
  }

  .item-icon {
    width: 44px;
    height: 44px;
    font-size: 22px;
  }

  .item-title {
    font-size: 17px;
  }

  .item-value {
    font-size: 15px;
  }

  .item-status {
    font-size: 15px;
  }

  .security-tips {
    padding: 24px 16px;
  }

  .tip-text {
    font-size: 15px;
  }
}
</style>